<template>
	<view>
	<!-- <image class="logo" src="/static/logo.png"></image> -->
		<Header :name="name"></Header>
		<view>
			<view class = "overview">
				<uni-swiper-dot class="uni-swiper-dot-box sliders" :info="info" :current="swiperDotIndex" mode="nav" field="content">
					<swiper class="swiper-box" @change="change" :current="swiperDotIndex">
						<swiper-item v-for="(item, index) in info" :key="index">
							<view class="swiper-item">
								<image :src="item.url" mode="aspectFill"></image>
							</view>
						</swiper-item>
					</swiper>
				</uni-swiper-dot>
				<view class="tab-list">
					<uni-segmented-control :current="current" :values="tabList" style-type="button"
						active-color="#00e718" @clickItem="onClickItem" />
				</view>
				<view class="info">
					<uni-row>
						<span class="price">￥150</span>
						<span class="icons">
							<uni-icons type="heart" size="25"></uni-icons> 
							<uni-icons type="pyq" size="25"></uni-icons>
						</span>
					</uni-row>
					<uni-row>
						<span class="title">密云本地溜达鸡</span>
						<span class="profile">简介</span>
					</uni-row>
					<uni-row class="field-list">
						<uni-col :span="4"><span class="field">品种</span></uni-col>
						<uni-col :span="20">
							<uni-tag v-for="item in categoryList" :text="item" type="success" circle="true"></uni-tag>
						</uni-col>
						
					</uni-row>
					<uni-row class="field-list">
						<uni-col :span="4"><span class="field">周期</span></uni-col>
						<uni-col :span="20"><span class="field-value">2-3年</span></uni-col>
					</uni-row>
					<uni-row class="field-list">
						<uni-col :span="4"><span class="field">产量</span></uni-col>
						<uni-col :span="20"><span class="field-value">北京油鸡</span></uni-col>
					</uni-row>
				</view>
			</view>
			<view class = "knowlegde">
				<uni-section title="趣味认养" titleFontSize="16px" style="font-size: 16px; font-weight: 600;">
				</uni-section>
				<view>
					<uni-list>
						<uni-list-item title="开启点击反馈" clickable  ></uni-list-item>
						<uni-list-item title="默认 navigateTo 方式跳转页面"></uni-list-item>
						<uni-list-item title="reLaunch 方式跳转页面" link="reLaunch" to="/pages/vue/index/index" @click="onClick($event,1)" ></uni-list-item>
					</uni-list>
				</view>
			</view>
			<view class = "service">
				<uni-section title="基础服务" titleFontSize="16px" style="font-size: 16px; font-weight: bolder;">
				</uni-section>
				<view>
					<uni-list>
						<uni-list-item title="开启点击反馈" clickable  ></uni-list-item>
						<uni-list-item title="默认 navigateTo 方式跳转页面"></uni-list-item>
						<uni-list-item title="reLaunch 方式跳转页面" link="reLaunch" to="/pages/vue/index/index" @click="onClick($event,1)" ></uni-list-item>
					</uni-list>
				</view>
			</view>
			<view class = "shareing">
				
			</view>
			<view class = "detail">
				<uni-section title="详细介绍" titleFontSize="16px" style="font-size: 16px; font-weight: 600;">
				</uni-section>
			</view>
		</view>
		<!-- 底部导航 -->
		<Tabar :value='value'></Tabar>
	</view>
</template>

<script>
	import Tabar from '@/pages/componment/tabar.vue'
	import Header from '@/pages/componment/Header.vue'
	export default {
		components:{ Tabar,Header },
		data() {
			return {
				name:'认养列表',
				title: '列表',
				value:1,
				info: [{
						colorClass: 'uni-bg-red',
						url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
						content: '内容 A'
					},
					{
						colorClass: 'uni-bg-green',
						url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
						content: '内容 B'
					},
					{
						colorClass: 'uni-bg-blue',
						url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
						content: '内容 C'
					}
				],
				modeIndex: -1,
				styleIndex: -1,
				current: 0,
				mode: 'default',
				dotsStyles: {},
				swiperDotIndex: 0,
				tabList: ['图片/视频','监控','详情'],
				categoryList: ['北京油鸡']
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="less">

.overview {
	background-color: #ffffff;
	padding-bottom: 20rpx;
	.sliders {
		margin: 0;
		height: 400rpx;
		
		.swiper-box {
			width: 100%;
			height: 100%;
		}
	}
	.tab-list {
		
		padding: 30rpx 100rpx;
		
	}
	.info {
		margin-top: 10rpx;
		padding: 10rpx 30rpx;
		
		.price {
			float: left;
			font-size: 16px;
			color: red;
		}
		.icons {
			float: right;
			
		}
		.title {
			padding: 5rpx 0rpx ;
			font-size: 16px;
			font-weight: 600;
			display: block;
		}
		
		.profile {
			font-size: 14px;
			color: gray;
			padding: 5rpx 0rpx;
		}
		
		.field-list {
			margin-top: 15rpx;
			padding: 10rpx 0;
			
			.field {
				padding-top: 20rpx;
				padding-right: 30rpx;
				font-weight: 600;
			}
			.field-value {
				font-size: 14px;
				font-weight: 400;
				color: gray;
			}
		}
	}
	
	.knowlegde {
		padding: 10rpx;
		.uni-section-header {
			font-size: 16px;
			font-weight: bolder;
		}
	}
}

</style>
